<template>
<div class="messageItem">
    <div class="message-content">{{ prop.message }}</div>
</div>
</template>
<script setup lang="ts" >
type MessageItem = {
    side:boolean,
    type:string,
    message:string
}

const prop = defineProps<MessageItem>()
</script>
<style scoped >
.messageItem {
    display: flex;
    flex-direction: v-bind('prop.side ? "row-reverse":"row"');
    margin: 10px;
}
.message-content {
    word-wrap: break-word;
    max-width: 300px;
    background-color: azure;
    overflow: hidden;

    border-radius: 10px;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
</style>